@charset "utf-8";
/* CSS Document */

/* JScrollPane中我的演示页面的样式表 - 这些样式是没有必要的，使用JScrollPane的不特定的任何特别的例子 */
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, Helvetica, sans-serif;font-size:80%;}
a.jScrollArrowUp{background:url(../JScrollPaneImage/basic_arrow_up.gif) repeat-x 0 0;}
a.jScrollArrowUp:hover{background-position:0 -15px;}
a.jScrollArrowDown{background:url(../JScrollPaneImage/basic_arrow_down.gif) repeat-x 0 0;}
a.jScrollArrowDown:hover{background-position:0 -15px;}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{background-position:0 -30px;}
.orange-bar .jScrollPaneTrack{background:#f60;}
.orange-bar .jScrollPaneDrag{background:#00f url(../JScrollPaneImage/drag_grab.gif) no-repeat 50% 50%;}
.orange-bar .scroll-pane{background:#69f;}
.holder{float:left;margin:10px;}
.scroll-pane{width:200px;height:200px;overflow:auto;background:#ccc;float:left;}
.wide{width:400px;}
.super-wide{width:700px;}
.tall{height:400px;}
#pane1{}
#pane2{height:150px;}
#pane3{height:190px;}
#pane4{height:190px;}
html{overflow:auto;/* body滚动条必要元素 */margin:0;padding:0;}
.demopage{overflow:auto;padding:10px 30px 10px 40px;}
.demopage h2{font-size:14px;margin:20px 0;}
.demopage h3,.demopage h4{font-size:12px;margin:10px 0;}
/* jScrollPane 必要元素 */
.jScrollPaneContainer{position:relative;overflow:hidden;z-index:1;}
.jScrollPaneTrack{position:absolute;cursor:pointer;right:0;top:0;height:100%;background:#aaa;}
.jScrollPaneDrag{position:absolute;background:#666;cursor:pointer;overflow:hidden;}
.jScrollPaneDragTop{position:absolute;top:0;left:0;overflow:hidden;}
.jScrollPaneDragBottom{position:absolute;bottom:0;left:0;overflow:hidden;}
a.jScrollArrowUp{display:block;position:absolute;z-index:1;top:0;right:0;text-indent:-2000px;overflow:hidden;/*background-color:#666;*/height:9px;}
a.jScrollArrowUp:hover{/*background-color:#f60;*/}
a.jScrollArrowDown{display:block;position:absolute;z-index:1;bottom:0;right:0;text-indent:-2000px;overflow:hidden;/*background-color:#666;*/height:9px;}
a.jScrollArrowDown:hover{/*background-color:#f60;*/}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover{/*background-color:#f00;*/}
/* 全身滚动自定义样式 */
.jScrollPaneTrack{background:url(../JScrollPaneImage/osx_track.gif) repeat-y;}
.jScrollPaneDrag{background:url(../JScrollPaneImage/osx_drag_middle.gif) repeat-y;}
.jScrollPaneDragTop{background:url(../JScrollPaneImage/osx_drag_top.gif) no-repeat;height:6px;}
.jScrollPaneDragBottom{background:url(../JScrollPaneImage/osx_drag_bottom.gif) no-repeat;height:7px;}
a.jScrollArrowUp{height:24px;background:url(../JScrollPaneImage/osx_arrow_up.png) no-repeat 0 -30px;}
a.jScrollArrowUp:hover{background-position:0 0;}
a.jScrollArrowDown{height:24px;background:url(../JScrollPaneImage/osx_arrow_down.png) no-repeat 0 -30px;}
a.jScrollArrowDown:hover{background-position:0 0;}
#pane1, #pane2, #pane3, #pane4{height:200px;}
.winXP .jScrollPaneTrack{background:url(../JScrollPaneImage/windows_track.gif) repeat-y;}
.winXP .jScrollPaneDrag{background:url(../JScrollPaneImage/windows_drag_middle.gif) no-repeat 0 50%;}
.winXP .jScrollPaneDragTop{background:url(../JScrollPaneImage/windows_drag_top.gif) no-repeat;height:4px;}
.winXP .jScrollPaneDragBottom{background:url(../JScrollPaneImage/windows_drag_bottom.gif) no-repeat;height:4px;}
.winXP a.jScrollArrowUp{height:17px;background:url(../JScrollPaneImage/windows_arrow_up.gif) no-repeat 0 0;}
.winXP a.jScrollArrowUp:hover{background-position:0 -20px;}
.winXP a.jScrollArrowDown{height:17px;background:url(../JScrollPaneImage/windows_arrow_down.gif) no-repeat 0 0;}
.winXP a.jScrollArrowDown:hover{background-position:0 -20px;}
.winXP a.jScrollActiveArrowButton, .winXP a.jScrollActiveArrowButton:hover{background-position:0 -40px;}
.osX .jScrollPaneTrack{background:url(../JScrollPaneImage/osx_track.gif) repeat-y;}
.osX .jScrollPaneDrag{background:url(../JScrollPaneImage/osx_drag_middle.gif) repeat-y;}
.osX .jScrollPaneDragTop{background:url(../JScrollPaneImage/osx_drag_top.gif) no-repeat;height:6px;}
.osX .jScrollPaneDragBottom{background:url(../JScrollPaneImage/osx_drag_bottom.gif) no-repeat;height:7px;}
.osX a.jScrollArrowUp{height:24px;background:url(../JScrollPaneImage/osx_arrow_up.png) no-repeat 0 -30px;}
.osX a.jScrollArrowUp:hover{background-position:0 0;}
.osX a.jScrollArrowDown{height:24px;background:url(../JScrollPaneImage/osx_arrow_down.png) no-repeat 0 -30px;}
.osX a.jScrollArrowDown:hover{background-position:0 0;}
.left .jScrollPaneTrack{left:0;right:auto;}
.left a.jScrollArrowUp{left:0;right:auto;}
.left a.jScrollArrowDown{left:0;right:auto;}
/* IE浏览器特定的 hack styles */
*html .osX .jScrollPaneDragBottom{bottom:-1px;}